import { useState } from 'react'
import './Index.scss'
import Header from './header/Header'
import Main from './main/Main'
const Index = () => {
  const [list, setList] = useState({
    list: [
      { name: '哇哈哈', date: '2017', priority: 1 },
      { name: '没哈哈', date: '2117', priority: 2 },
      { name: '有哈哈', date: '2317', priority: 1 },
      { name: '无哈哈', date: '2567', priority: 3 },
      { name: '呜哈哈', date: '2021', priority: 2 },
      { name: '右哈哈', date: '2023', priority: 1 },
    ],
  })

  const add = (item) => {
    let navList = list.list
    navList.push(item)
    setList(() => {
      return {
        ...list,
        list: navList,
      }
    })
  }
  return (
    <div className="index">
      <Header add={add} />
      <Main list={list} />
    </div>
  )
}

export default Index

// import { useState } from 'react'
// import './Index.scss'

// const Index = () => {
//   const [userinfo, setUserinfo] = useState({ name: '', date: '', priority: '' })
//   const [list, setList] = useState({
//     list: [
//       { name: '哇哈哈', date: '2017', priority: 1 },
//       { name: '没哈哈', date: '2117', priority: 2 },
//       { name: '有哈哈', date: '2317', priority: 1 },
//       { name: '无哈哈', date: '2567', priority: 3 },
//       { name: '呜哈哈', date: '2021', priority: 2 },
//       { name: '右哈哈', date: '2023', priority: 1 },
//     ],
//   })
//   // 日期
//   const handDate = (e) => {
//     setUserinfo({ ...userinfo, date: e.target.value })
//   }
//   // 姓名
//   const handName = (e) => {
//     setUserinfo({ ...userinfo, name: e.target.value })
//   }
//   // 优先级
//   const handPriority = (e) => {
//     setUserinfo({ ...userinfo, priority: e.target.value })
//   }
//   const add = () => {
//     let navList = list.list
//     navList.push(userinfo)
//     setList(() => {
//       return {
//         ...list,
//         list: navList,
//       }
//     })
//   }
//   return (
//     <div className="index">
//       <div className="date">
//         <span> 日期： </span>
//         <input type="text" onChange={handDate} placeholder="请输入日期" />
//       </div>
//       <div className="title">
//         <span> 标题： </span>
//         <input type="text" onChange={handName} placeholder="请输入标题" />
//       </div>
//       <div className="priority">
//         <span> 优先级： </span>
//         <input type="text" onChange={handPriority} placeholder="请输入优先级" />
//       </div>
//       <div className="btnAdd">
//         <button onClick={add}> 添加 </button>
//       </div>
//       <div className="list">
//         <ul className="listUl">
//           <li>标签</li>
//           <li>日期</li>
//           <li>优先级</li>
//         </ul>
//         <ul>
//           {list.list.map((item, key) => (
//             <div key={key} className="divul">
//               <li>{item.name} </li>
//               <li>{item.date}</li>
//               <li>{item.priority}</li>
//             </div>
//           ))}
//         </ul>
//       </div>
//     </div>
//   )
// }

// export default Index
